<template>
  <el-dialog
    :model-value="show"
    title="查看邮箱"
    width="800px"
    append-to-body
    :show-close="false"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="handleClose"
    destroy-on-close
  >
    <div v-loading="loading">
      <div v-if="isNoEmail" class="no-data">
        邮箱不存在，请通过其他方式查看邮箱内容
      </div>
      <zx-table
        v-else
        ref="tableRef"
        height="100%"
        :columns="columns"
        :data="tableData"
        @expand-change="expandChange"
      >
        <template #btn="{ row }">
          <div class="email-content">
            <div class="email-item">
              <span class="email-label">标题：</span>
              <span class="email-value">{{ row.subject }}</span>
            </div>
            <!-- // 确定下是否显示html -->
            <div class="email-item mt-10">
              <span class="email-label">内容：</span>
              <span class="email-value">
                {{ row.content }}
              </span>
            </div>
          </div>
        </template>
      </zx-table>
    </div>
    <template #footer>
      <el-button type="primary" :loading="loading" @click="getTableData">
        刷新
      </el-button>
      <el-button type="info" @click="handleClose">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { companyResourceFb_accountGet_email } from '@/api/resources.js';
import { useTable } from 'zhixin-ui';
import { FORMAT_DATE } from '@/utils/const';
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  activeRow: {
    type: Object,
    default: () => {}
  }
});

const emit = defineEmits(['update:show']);
const tableRef = ref();

function handleClose() {
  emit('update:show', false);
}

function expandChange(row, expandList) {
  if (expandList.length <= 1) return;
  expandList.forEach(item => {
    tableRef?.value?.zxTableRef?.toggleRowExpansion(item, false);
  });
  tableRef?.value?.zxTableRef?.toggleRowExpansion(row, true);
}

const columns = reactive([
  { prop: 'from', label: '发件人' },
  {
    prop: 'date',
    label: '发件时间',
    format(data) {
      return FORMAT_DATE(data, 'YYYY-MM-DD HH:mm:ss');
    }
  },
  { prop: 'btn', slot: 'btn', type: 'expand', label: '操作', width: 100 }
]);

// 表格hooks
const isNoEmail = ref(false);
const searchParams = reactive({});
const { loading, tableData, getTableData } = useTable(
  companyResourceFb_accountGet_email,
  {
    tableRef,
    searchParams,
    autorun: false,
    pages: {},
    onSuccess(res) {
      if (res.no === 2) {
        isNoEmail.value = true;
      } else {
        isNoEmail.value = false;
      }
    }
  }
);

watch(
  () => props.show,
  val => {
    if (!val) return;
    isNoEmail.value = false;
    if (tableData?.value?.length) tableData.value = [];

    searchParams.id = props.activeRow.id;
    getTableData();
  }
);
</script>

<style lang="scss" scoped>
:deep(.el-table__expand-icon) {
  transform: rotateZ(90deg);
}
:deep(.el-table__expand-icon.el-table__expand-icon--expanded) {
  transform: rotateZ(-90deg);
}
.email-content {
  padding: 10px 20px;
}
.email-item {
  display: flex;
}
.email-label {
  font-weight: bold;
}
.email-value {
  flex: 1;
  word-break: break-all;
}
.no-data {
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
